package myJs.components.lefse

import japgolly.scalajs.react.ReactMonocle._
import japgolly.scalajs.react._
import japgolly.scalajs.react.component.Scala.BackendScope
import japgolly.scalajs.react.extra.StateSnapshot
import japgolly.scalajs.react.vdom.all._
import monocle.Lens
import monocle.macros.Lenses
import myJs.components.PureInputComponent
import myJs.components.inline.{BetweenInlineComponent, InputInlineComponent, SelectInlineComponent}
import myJs.myPkg.jquery._
import myJs.tool.Tool._
import shared.Pojo.AllPlotData
import myJs.Implicits._

import scala.collection.immutable.SeqMap

/** Created by yz on 3/11/2020
  */
object CladogramLayoutComponent {

  @Lenses
  case class State(
      formJq: JQuery,
      clasc: String,
      claevl: String,
      claml: String,
      claclv: String,
      clacs: String,
      clarsl: String,
      clalstartl: String,
      clalstopl: String,
      claastartl: String,
      claastopl: String,
      claminps: String,
      clamaxps: String,
      clarsp: String
  )

  object State {

    def init = {
      State(
        formJq = $("#form"),
        clasc = "",
        claevl = "1",
        claml = "6",
        claclv = "1",
        clacs = "1.5",
        clarsl = "1",
        clalstartl = "2",
        clalstopl = "5",
        claastartl = "3",
        claastopl = "5",
        claminps = "1",
        clamaxps = "6",
        clarsp = "0.15"
      )
    }

  }

  class Backend(bs: BackendScope[Unit, State]) {

    def render(s: State) = {

      implicit class MyLens[T](lens: Lens[State, T]) {

        def zoomL(implicit r: Reusability[T]) = {
          StateSnapshot.withReuse.zoomL(lens).prepareVia(bs).apply(s)
        }

      }

      val claevlMap = SeqMap("1" -> messages("yes"), "0" -> messages("no"))
      div(
        InputInlineComponent
          .Props(
            State.clasc.zoomL,
            label = messages("clascLabel"),
            name = "clasc",
            questionInfo = messages("clascInfo"),
            formJq = s.formJq
          )
          .render,
        SelectInlineComponent
          .Props(
            State.claevl.zoomL,
            label = messages("claevlLabel"),
            name = "claevl",
            optionMap = claevlMap,
            questionInfo = messages("claevlInfo")
          )
          .render,
        InputInlineComponent
          .Props(
            State.claml.zoomL,
            label = messages("clamlLabel"),
            name = "claml",
            formJq = s.formJq,
            questionInfo = messages("clamlInfo")
          )
          .render,
        SelectInlineComponent
          .Props(
            State.claclv.zoomL,
            label = messages("claclv"),
            name = "claevl",
            optionMap = claevlMap,
            questionInfo = messages("claevlInfo")
          )
          .render,
        InputInlineComponent
          .Props(
            State.clacs.zoomL,
            label = messages("clacs"),
            name = "clacs",
            formJq = s.formJq,
            questionInfo = messages("clacsInfo")
          )
          .render,
        InputInlineComponent
          .Props(State.clarsl.zoomL, label = messages("clarsl"), name = "clarsl", formJq = s.formJq)
          .render,
        BetweenInlineComponent
          .Props(
            start = State.clalstartl.zoomL,
            end = State.clalstopl.zoomL,
            label = messages("clal"),
            startName = "clalstartl",
            endName = "clalstopl",
            formJq = s.formJq,
            questionInfo = messages("clalInfo")
          )
          .render,
        BetweenInlineComponent
          .Props(
            start = State.claastartl.zoomL,
            end = State.claastopl.zoomL,
            label = messages("claa"),
            startName = "claastartl",
            endName = "claastopl",
            formJq = s.formJq,
            questionInfo = messages("claaInfo")
          )
          .render,
        BetweenInlineComponent
          .Props(
            start = State.claminps.zoomL,
            end = State.clamaxps.zoomL,
            label = messages("cla"),
            startName = "claminps",
            endName = "clamaxps",
            formJq = s.formJq
          )
          .render,
        InputInlineComponent
          .Props(
            State.clarsp.zoomL,
            label = messages("clarsp"),
            name = "clarsp",
            formJq = s.formJq,
            questionInfo = messages("clarspInfo")
          )
          .render
      )

    }

  }

  def component(state: State) = {
    ScalaComponent.builder[Unit].initialState(state).renderBackend[Backend].build
  }

  val Component = component(State.init)

}
